//轮播图
//阻止a默认事件
$('.btn1').on('click', function () {
    return false
})
$('.btn2').on('click', function () {
    return false
})
$('.banner-nav').children().on('click', function () {
    return false
})
var a = 0;
var lunbotu = $('.banner').children().children()
$('.banner').children().children().eq(0).fadeIn()
var time = setInterval(fn, 2000);
// 轮播图自动轮播


function fn() {
    a++;
    if (a == 3) {
        lunbotu.eq(0).fadeIn()
        lunbotu.eq(a - 1).fadeOut()
        $('.banner-nav').children().eq(0).css('background', '#ff8000')
        $('.banner-nav').children().eq(a - 1).css('background', 'rgba(255,255,255,.5)')
        // console.log(a);
        return a = 0;
    }
    lunbotu.eq(a).siblings().fadeOut()
    lunbotu.eq(a).fadeIn()
    $('.banner-nav').children().eq(a).css('background', '#ff8000')
    $('.banner-nav').children().eq(a).siblings().css('background', 'rgba(255,255,255,.5)')
}
// 鼠标移入移出左右两边按键显示消失
$('.banner').on({
    mouseover: function () {
        clearInterval(time);
        $('.btn1').css('display', 'block')
        $('.btn2').css('display', 'block')
    },
    mouseout: function () {
        clearInterval(time);
        time = setInterval(fn, 2000)
        $('.btn1').css('display', 'none')
        $('.btn2').css('display', 'none')
    }
})
// 点击左右按钮
$('.btn1').on('click', function () {
    a += 1;
    // console.log(a);
    lunbotu.eq(a).fadeIn()
    lunbotu.eq(a).siblings().fadeOut()
    $('.banner-nav').children().eq(a).css('background', '#ff8000').siblings().css('background', 'rgba(255,255,255,.5)');
    if (a >= 3) {
        $('.banner-nav').children().eq(0).css('background', '#ff8000')
        $('.banner-nav').children().eq(a - 1).css('background', 'rgba(255,255,255,.5)')
        return a = 0
    }

})
$('.btn2').on('click', function () {
    a -= 1;
    lunbotu.eq(a).fadeIn()
    lunbotu.eq(a).siblings().fadeOut()
    $('.banner-nav').children().eq(a).css('background', '#ff8000').siblings().css('background', 'rgba(255,255,255,.5)');
    if (a <= 0) {
        $('.banner-nav').children().eq(0).css('background', '#ff8000')
        $('.banner-nav').children().eq(a - 1).css('background', 'rgba(255,255,255,.5)')

        // console.log(a);
        return a = 3;
    }

})
//点击banner小圆点改变轮播图
$('.banner-nav').children().eq(0).css('background', '#ff8000')
$('.banner-nav').children().on('click', btn)

function btn() {
    $(this).css('background', '#ff8000').siblings().css('background', 'rgba(255,255,255,.5)');
    console.log($(this).index());
    $('.banner').children().children().eq($(this).index()).fadeIn().siblings().fadeOut()
    a = $(this).index()
}



// 倒计时
$(function () {
    fn()

    function fn() {
        var timer = setInterval(function () {
            // var start = '2021/07/14 00:00:00';
            var StartTime = new Date();
            var NowTime = new Date();
            var day = NowTime.getDate();
            var month = NowTime.getMonth() + 1;
            var year = NowTime.getFullYear();
            // var tw = year + '/' + month + '/' + day + ' 08:00:00';
            // var ei = year + '/' + month + '/' + day + ' 10:00:00';
            var tw1 = year + '/' + month + '/' + day + ' 12:00:00';
            var ei1 = year + '/' + month + '/' + day + ' 24:00:00';
            // tw = new Date(tw).getTime();
            // ei = new Date(ei).getTime();
            tw1 = new Date(tw1).getTime();
            ei1 = new Date(ei1).getTime();
            var EndTime = '';
            if (NowTime < StartTime) {
                EndTime = StartTime;
                // $('#stopNow').css('display', 'none');
                // $('#startNow').css('display', 'none');
                // $('#noStart').css('display', '·block');
                // $(".jjms").html("即将秒杀，敬请期待")
            } else {
                // if (NowTime < tw) {
                //     EndTime = tw;
                //     $('#stopNow').css('display', 'none');
                //     $('#startNow').css('display', 'none');
                //     $('#noStart').css('display', 'block');
                //     $(".jjms").html("即将秒杀，敬请期待")
                // } 
                // else if (NowTime >= tw && NowTime < ei) {
                //     EndTime = ei;
                //     $('#stopNow').css('display', 'none');
                //     $('#startNow').css('display', 'block');
                //     $('#noStart').css('display', 'none');
                //     $(".jjms").html("即将秒杀，敬请期待")
                // } 
                // else 
                if (NowTime < tw1) {
                    EndTime = tw1;
                    // $('#stopNow').css('display', 'none');
                    // $('#startNow').css('display', 'none');
                    // $('#noStart').css('display', 'block');
                    // $(".jjms").html("即将秒杀，敬请期待")
                } else if (NowTime >= tw1 && NowTime < ei1) {
                    EndTime = ei1;
                    // $('#stopNow').css('display', 'none');
                    // $('#startNow').css('display', 'block');
                    // $('#noStart').css('display', 'none');
                    // $(".jjms").html("即将秒杀，敬请期待")
                }

                // else if (NowTime >= ei1) {
                //     EndTime = tw + 24 * 60 * 60 * 1000;
                //     $('#stopNow').css('display', 'block');
                //     $('#startNow').css('display', 'none');
                //     $('#noStart').css('display', 'none');
                //     $(".jjms").html("即将秒杀，敬请期待")
                // }
            }
            // console.log(EndTime)
            var t = EndTime - NowTime;
            if (t < 1000) {
                window.location.reload();
                clearInterval(timer);
                timer = null;
                return false;
            }
            var d = 0;
            var h = 0;
            var m = 0;
            var s = 0;
            if (t >= 0) {
                d = Math.floor((t / 1000 / 3600) / 24);
                h = Math.floor((t / 1000 / 3600) % 24);
                m = Math.floor((t / 1000 / 60) % 60);
                s = Math.floor(t / 1000 % 60);
                if (d < 10) {
                    d = "0" + d;
                }
                if (h < 10) {
                    h = "0" + h;
                }
                if (m < 10) {
                    m = "0" + m;
                }
                if (s < 10) {
                    s = "0" + s;
                }
                $('.hour-sj').html(h);
                $('.minute-sj').html(m);
                $('.second-sj').html(s);
            }
        }, 1000)
    }
})
//商品详情页
/* 放大镜
    需求分析
        1 鼠标移入small盒子，mask盒子显示，big盒子显示
        2 鼠标在small盒子里面移动，mask盒子跟着移动
        3 鼠标在mask的中间，mask不能超出small盒子
        4 bigImg显示相应的部分
        5 鼠标移出small盒子，mask盒子隐藏，big盒子隐藏
*/
//获取元素信息
window.onload = function () {
    var box = document.getElementById('box')
    var smallBox = document.getElementById('small')
    var bigBox = document.getElementById('big')
    var mask = document.getElementById('mask')

    //鼠标移入small盒子，mask盒子显示，big盒子显示
    smallBox.onmouseenter = function () {
        mask.style.display = 'block';
        bigBox.style.display = 'block';
    }
    //鼠标在small中移动
    window.onmousemove = function (e) {
        e = e || window.event;
        //鼠标距离box的距离=窗口距离 - box内的距离
        var left = e.clientX - box.offsetLeft - 1;
        var top = e.clientY - box.offsetTop - 1;
        //鼠标显示内容在mask中间     mask 宽高分半  居中
        left = left - mask.offsetWidth / 2;
        top = top - mask.offsetHeight / 2;

        //mask不能移动出small
        if (left < 0) { //左
            left = 0;
        }
        if (top < 0) { //上
            top = 0;
        }
        if (left > small.offsetWidth - mask.offsetWidth) { //右
            left = small.offsetWidth - mask.offsetWidth
        }
        if (top > small.offsetHeight - mask.offsetHeight) { //下
            top = small.offsetHeight - mask.offsetHeight
        }

        //mask盒子跟着鼠标动
        mask.style.left = left + 'px'
        mask.style.top = top + 'px'
        //small鼠标移动big中图片也进行移动
        bigimg.style.left = -left / smallBox.offsetWidth * bigimg.offsetWidth + 'px'
        bigimg.style.top = -top / smallBox.offsetHeight * bigimg.offsetHeight + 'px'
    }
    //鼠标移出small盒子，mask盒子隐藏，big盒子隐藏
    smallBox.onmouseleave = function () {
        mask.style.display = 'none';
        bigBox.style.display = 'none';
    }
}
//购物车
$('#add').click(function () {
    $.ajax({
        url: "http://localhost/suning/src/interface/add.php",
        data: {
            id: $('#one').text(),
            name: $('#title').text(),
            img: $('#pic').attr('src'),
            price: $('#price').text(),
            num: $('#num').val()
        },
        success: function (res) {
            // console.log(res)
            if (res.code == 1) {
                alert('商品加入成功')
            }
        },
        dataType: "json"
    })
})
// 修改商品数量
$('#all').on('click', '.add', function () {
    var id = $(this).parents('tr').children().eq(0).text();
    $.ajax({
        url: "http://localhost/suning/src/interface/update.php",
        data: {
            id: id,
            type: 'add'
        },
        success: function (res) {
            if (res.code === 1) {
                show()
            }
        },
        dataType: "json"
    })
})
$('#all').on('click', '.cut', function () {
    var id = $(this).parents('tr').children().eq(0).text();
    $.ajax({
        url: "http://localhost/suning/src/interface/update.php",
        data: {
            id: id,
            type: 'cut'
        },
        success: function (res) {
            if (res.code === 1) {
                show()
            }
        },
        dataType: "json"
    })
})
// 删除商品
$('#all').on('click', '.del', function () {
    var id = $(this).parents('tr').children().eq(0).text();
    $.ajax({
        url: "http://localhost/suning/src/interface/del.php",
        data: {
            id: id
        },
        success: function (res) {
            if (res.code === 1) {
                show();
            }
        },
        dataType: "json"
    })
})
// 展示购物车数据
show()

function show() {
    $.ajax({
        url: "http://localhost/suning/src/interface/showlist.php",
        success: function (res) {
            // console.log(res)
            $('#all').html(`<tr>
                    <th>编号</th>
                    <th>商品名</th>
                    <th>图片</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>删除</th>
                </tr>   `)
            if (res.code == 1) {
                res.data.forEach(function (val) {
                    $('#all').append(`<tr>
            <td>${val.product_id}</td>
            <td style="width:200px;">${val.product_name}</td>
            <td>
                <img src="${val.product_img}" alt="">
            </td>
            <td>
                ${val.product_price}
            </td>
            <td>
                <span class="cut">-</span>
                <input type="text" value='${val.product_num}' disabled>
                <span class="add">+</span>
            </td>
            <td>
                <input type="button" value="删除" class="del">
            </td>
        </tr>`)
                })
            }
        },
        dataType: "json"
    })
}
  

for (let n = 0; n <= 14; n++) {
    $('#aaa').children().eq(n).on("mouseenter",n,function(){
        $('.list-con').html('')
        $('.list-con').css("display","block");
        $.ajax({
            url: 'http://localhost/suning/src/json/index'+n+'.json',
            success: function (res) {
                console.log(res)
                for (let i = 0; i < res.length; i++) {
                    // console.log(i);
                    $('.list-con').append(`<h3>${res[i].title}</h3>`)
                    res[i].items.forEach(function (val) {
                        $('.list-con').append(`<a>${val.show_name}</a>`)
                    });
                }
            },
            dataType: "json",
    
        })
    })
    $('#aaa').children().eq(n).on("mouseleave",n,function(){
        $('.list-con').css("display","none");
    })
}


